<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <van-field v-model="dateday" type="text" readonly placeholder="请选择排班日期" label="排班日期" input-align="right"  />
    <van-field is-link v-model="timeVal" type="text" readonly placeholder="请选择排班时间" label="排班时间" input-align="right"  @click="[isEdit !== 0 ? timeShow = true : '']" />
    <van-field is-link  type="text" readonly  label="排班情况" input-align="right"  @click="[isEdit != 0 ? PaibanShow = true : '']" />
    <van-collapse v-model="activeNames">
      <van-collapse-item  name="1" v-show="((selectPaiBanListName && selectPaiBanListName.length>0) ||
       (TeamScheduling && TeamScheduling.length>0 && isEdit == 1))">
        <template #title>
          <div class="label" ><a class="hengGang"></a>排班情况</div>
        </template>
        <p class="pBox" style="min-height: 30px"
           v-show="start_time">{{start_time}}~{{end_time}}</p>
        <p class="pBox pContent" style="min-height: 30px"
           v-if="selectPaiBanListName && selectPaiBanListName.length > 0"
           v-for="(item, index) in selectPaiBanListName" :key="index">
          {{item}}
        </p>
        <p  class="pBox" style="min-height: 30px"
            v-if="TeamScheduling && TeamScheduling.length > 0 && isEdit == 1 && selectPaiBanListName.length <= 0"
            v-for="(current, index) in NAME(TeamScheduling)" :key="index">
          {{current}}
        </p>
      </van-collapse-item>

      <van-collapse-item  name="2">
        <template #title>
          <div class="label" ><a class="hengGang"></a>今日排班</div>
        </template>
        <div class="box" v-for="(childenItem, childenIndex) in PaiBanList"
             :key="childenIndex">
          <div class="box_left">
            <p style="min-height: 30px" >
              <span>{{childenIndex}}</span>
            </p>
            <p  style="min-height: 30px" v-for="(item, index) in NAME(childenItem)" :key="index">
              {{item}}
            </p>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="bottom" v-show="isEdit !== 0">
      <button @click="keep">保存</button>
    </div>
    <van-popup v-model="timeShow"  round position="bottom" :style="{ bottom: '50px'}">
      <van-picker show-toolbar
                  @confirm="timeConfirm"
                  @cancel="timeShow = false"
                  title="选择排班时间" :columns="TimeColumns" />
    </van-popup>
    <van-popup v-model="PaibanShow" :lock-scroll="false" round position="bottom" :style="{height: '80%', bottom: '50px'}">
      <div class="popSticky">
        <div  class="popHeader">
          <div class="div" @click="PaibanShow = !PaibanShow"><span>取消</span></div>
          <div class="div"><span>选择排班</span></div>
          <div class="div" @click="paiBanConfirm()"><span class="solid">确认</span></div>
        </div>
        <div class="popTitle">
          <div class="popLeft">团队成员</div>
          <div class="popRight">排班内容</div>
        </div>
      </div>
      <div class="popContent" :style="{height: [PaibanShow ? leftMenuHeight : leftMenuHeight]}">
          <div class="popLeft" :style="{height: [PaibanShow ? leftMenuHeight : leftMenuHeight]}">
            <p v-for="(item, index) in TeamPeopleList"
               :key="index"
               :class="[index === peopleIndex? 'selectLeft' : '']"
                @click="selectPeople(item, index)">
              <a class="hengGang" v-show="index === peopleIndex"></a>
              {{item.NICK_NAME}}
            </p>
          </div>
          <div class="popRight" v-show="index === peopleIndex"
               v-for="(odd, index) in TeamPeopleList"
               :key="index">
            <p v-for="(childenItem, childenIndex) in odd.xiangmu"
               :key="childenIndex"
            @click="selectXiangmu(childenItem, childenIndex)">
              <span>{{childenItem.item}}</span>
              <img src="../../../../assets/题目选择@2x.png" v-if="childenItem.select" class="selectImg" alt="">
              <img src="../../../../assets/题目未选择.png" v-else class="selectImg" alt="">
            </p>
          </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Start_EndTime from '../../../../assets/Time/Start_EndTime'
import {Toast} from 'vant'
import $ from 'jquery'
export default {
  name: 'BuildTeamScheduling',
  data () {
    return {
      title: '',
      dateday: this.$route.query.dateday,
      start_time: this.$route.query.start_time, // 排班开始时间
      end_time: this.$route.query.end_time, // 排班结束时间
      timeShow: false,
      TimeColumns: Start_EndTime.columns,
      PaibanShow: false,
      team_id: this.$route.query.team_id,
      TeamPeopleList: [],
      peopleIndex: 0,
      selectPaiBanList: [],
      activeNames: ['1', '2'],
      isEdit: this.$route.query.isEdit,
      selectPaiBanListName: [],
      PaiBanList: []
    }
  },
  computed: {
    NAME () {
      return function (item) {
        var allList = []
        var arrayObj = new Array()
        // // 先得到 所有的 名字
        for (var i = 0, l = item.length; i < l; i++) {
          if (!($.inArray(item[i].doc_user_id, arrayObj) >= 0)) {
            let obj = {
              doc_user_id: item[i].doc_user_id,
              NICK_NAME: item[i].NICK_NAME
            }
            arrayObj.push(obj)
          }
        }
        const res = new Map()
        arrayObj = arrayObj.filter((arrayObj) => !res.has(arrayObj.doc_user_id) && res.set(arrayObj.doc_user_id, 1))
        // // 循环userid 提取ITEM_NAME
        arrayObj.map((current, index) => {
          var ITEM_NAME = ''
          item.map((childen, childenIndex) => {
            if (current.doc_user_id === childen.doc_user_id) {
              if (childen.ITEM_NAME) {
                ITEM_NAME += childen.ITEM_NAME + '、'
              } else {
                ITEM_NAME += childen.ITEM_ID + '、'
              }
            }
          })
          allList.push(current.NICK_NAME + '-' + ITEM_NAME.slice(0, -1))
        })
        return allList
      }
    },
    timeVal: function () {
      if (this.start_time !== '' && this.start_time !== undefined) {
        return this.start_time + '~' + this.end_time
      }
    },
    leftMenuHeight () {
      return ($(window).height() * 0.9) - 50 - 60 - 44 - 20 + 'px'
    },
    TeamScheduling () {
      let shijianDuan = this.$route.query.start_time + '~' + this.$route.query.end_time
      let data = this.PaiBanList[shijianDuan]
      if (data) {
        return data
      } else {
        return []
      }
    }
  },
  mounted () {
    // 获取团队成员
    this.getTeamPeople()
    // 获取当天排班列表
    this.getDataList()
    if (this.isEdit == 1) {
      this.title = '编辑排班'
      document.title = this.title
    } else if (this.isEdit == 0) {
      this.title = '查看排班'
      document.title = this.title
    } else {
      this.title = '新增排班'
      this.id = ''
      document.title = this.title
    }
  },
  methods: {
    // 获取当天排班列表
    getDataList () {
      this.isLoading = true
      this.$http.findTeamSchedule({team_id: this.team_id, dateday: this.dateday})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.PaiBanList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 保存
    keep () {
      let ids = []
      if (this.TeamScheduling && this.TeamScheduling.length > 0) {
        this.TeamScheduling.map((curr, index) => {
          ids.push(curr.id)
        })
      }
      ids = ids.toString()
      if (!this.start_time && this.end_time) {
        Toast('请选择排班时间')
        return false
      } else if (this.selectPaiBanList && this.selectPaiBanList.length <= 0) {
        Toast('请选择排班情况')
        return false
      }
      if (ids.length > 0) {
        this.$http.createTeamRoster({dateday: this.dateday,
          team_id: this.team_id,
          list: [
            {
              start_time: this.start_time,
              end_time: this.end_time,
              pList: this.selectPaiBanList
            }
          ],
          ids: ids
        }
        )
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (this.isEdit === 1) {
                Toast('修改成功')
              } else {
                Toast('保存成功')
                this.getXiangMu(0)
                this.start_time = ''
                this.end_time = ''
              }
              this.getDataList()
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            Toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.createTeamRoster({dateday: this.dateday,
          team_id: this.team_id,
          list: [
            {
              start_time: this.start_time,
              end_time: this.end_time,
              pList: this.selectPaiBanList
            }
          ]
        }
        )
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (this.isEdit === 1) {
                Toast('修改成功')
              } else {
                Toast('保存成功')
                this.getXiangMu(0)
                this.start_time = ''
                this.end_time = ''
              }
              this.getDataList()
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            Toast('您的网络有些拥挤，请稍后再试')
          })
      }
    },
    // 排班确认按钮
    paiBanConfirm () {
      this.selectPaiBanList = []
      this.selectPaiBanListName = []
      this.TeamPeopleList.map((item, index) => {
        var itemname = ''
        var name = ''
        name = item.NICK_NAME
        item.xiangmu.map((odd, oddIndex) => {
          if (odd.select) {
            itemname = itemname + odd.item + '、'
            let obj = {
              'type': odd.item_type,
              'team_amount_id': odd.id,
              doc_user_id: item.USER_ID
            }
            this.selectPaiBanList.push(obj)
          }
        })
        if (itemname !== '') {
          itemname = name + '-' + itemname
          this.selectPaiBanListName.push(itemname.substring(0, itemname.length - 1))
        }
      })
      console.log(this.selectPaiBanList)
      this.PaibanShow = false
    },
    // 选择项目
    selectXiangmu (item, index) {
      if (item.select) {
        item.select = !item.select
      } else {
        this.$set(item, 'select', true)
      }
    },
    // 选择团队成员
    selectPeople (item, index) {
      this.peopleIndex = index
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取团队成员
    getTeamPeople () {
      this.$http.Teamdetail({id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.TeamPeopleList = res.data.data.doctor
            // 获取当前团队维护的项目
            this.getXiangMu(1)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取当前团队维护的项目
    getXiangMu (num) {
      this.$http.findTeamNeiRong({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.TeamPeopleList.map((item, index) => {
              let data = JSON.stringify(res.data.data)
              if (item.xiangmu) {
                item.xiangmu = JSON.parse(data)
              } else {
                this.$set(item, 'xiangmu', JSON.parse(data))
              }

              if (this.TeamScheduling && this.isEdit == 1 && num !== 0) {
                this.TeamScheduling.map((curr, index) => {
                  if (item.USER_ID === curr.doc_user_id) {
                    item.xiangmu.map((childen, childenIndex) => {
                      if (curr.team_amount_id === childen.id) {
                        this.$set(childen, 'select', true)
                      }
                    })
                  }
                })
              }
            })
            this.paiBanConfirm()
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 时间段选择
    timeConfirm (value, index) {
      this.start_time = value[0]
      this.end_time = value[1]
      this.timeShow = false
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  /*background: #FAF9FE;*/
  overflow: auto;
  font-family: "PingFang SC";
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.popSticky{
  position: sticky;
  top: 0;
}
.popHeader{
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px -1px 0px 0px #E5E5E5;
  display: flex;
}
.popHeader .div:first-child {
  margin-left: 15px;
  color: #999999;
}
.popTitle{
  height: 44px;
  background: #1da4f2;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
.popLeft{
  width: 30%;
  overflow: auto;
  border-right: 1px solid #E5E5E5;
}
.popRight{
  width: 65%;
  overflow: scroll;
}
.popTitle .popLeft,
.popTitle .popRight{
  padding-left: 10px;
  box-sizing: border-box;
  display: flex;
}
.popContent {
  display: flex;
  overflow: hidden;
}
/deep/ .van-collapse-item__content,
/deep/ .van-cell{
  font-size: 15px;
}
/deep/ .van-field__label{
  color: #333333;
}
.popContent .popLeft{
  background: #F5F5F5;
  flex-wrap: wrap;
  overflow: auto;
}
.popContent .popRight{
  margin: 0 10px;
  flex-direction: column;
  min-height: 44px;
  display: flex;
  /*flex-wrap: wrap;*/
  overflow: auto;
}
.popContent .popRight p span{
  width: 90%;
}
.popContent .popRight p{
  border-bottom: 1px solid #E5E5E5;
}
.popContent .popLeft p{
  padding-left: 10px;
  box-sizing: border-box;
 }
.popContent .popRight p,

.popContent .popLeft p{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.selectLeft{
  color: #1da4f2!important;
  background: #FFFFFF!important;
  padding: 0!important;
}
.hengGang{
  display: inline-flex;
  width: 2px;
  height: 15px;
  border-radius: 2px;
  background: #1da4f2;
  margin-right: 5px;
  /*margin-left: 5px;*/
}
.selectImg{
  width: 16px;
  height: 16px;
}
.bottom{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
}
.bottom button{
  width: 95%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.pContent{
  min-height: 30px;
}

.box,
.pBox{
  width: 100%;
  font-size: 15px;
  color: #333;
  /*padding-bottom: 10px;*/
  /*box-sizing: border-box;*/
  padding: 10px 16px;
  box-sizing: border-box;
  /*border-top: 1px solid #E5E5E5;*/

}
.box{
  border-bottom: 1px solid #E5E5E5;
}
/deep/ .van-collapse-item__content{
  padding-left: 0;
  padding-right: 0;
}
.box:last-child{
  margin-bottom: 50px;
}

.box_left{
  width: 100%;
  min-height: 35px;
  /*height: 75px;*/
  display: flex;
  align-items: center;
  flex-direction: column;
}
.box_left p{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  line-height: 1.8;
}
.box_left p span{
  margin-right: 15px;
}

/deep/ .van-collapse-item__content{
color: #333333;
}
/deep/ .van-hairline--top-bottom::after,
/deep/ .van-hairline-unset--top-bottom::after{
  border: none;
}
.label{
  /*height: 44px;*/
  display: flex;
  align-items: center;
  /*padding: 0 10px;*/
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  background: white;
}
</style>
